<template>
  <div class="center">
	<div class="center_left">
		<a-card>
			<div class="center_left_img_box">
				<div>
					<img src="../../img/Tx.png" />
				</div>
				<div>Serati Ma</div>
				<div>海纳百川，有容乃大</div>
			</div>
			<div>
				<p><a-icon style="margin-right: 8px;" type="gift" />交互专家</p>
				<p><a-icon style="margin-right: 8px;" type="apartment" />蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</p>
				<p><a-icon style="margin-right: 8px;" type="environment" />浙江省杭州市</p>
			</div>
			<a-divider />
			<div>标签</div>
			<div class="tags">
			    <template v-for="(tag, index) in tags">
			      <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
			        <a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
			          {{ `${tag.slice(0, 20)}...` }}
			        </a-tag>
			      </a-tooltip>
			      <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
			        {{ tag }}
			      </a-tag>
			    </template>
			    <a-input
			      v-if="inputVisible"
			      ref="input"
			      type="text"
			      size="small"
			      :style="{ width: '78px' }"
			      :value="inputValue"
			      @change="handleInputChange"
			      @blur="handleInputConfirm"
			      @keyup.enter="handleInputConfirm"
			    />
			    <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
			      <a-icon type="plus" /> New Tag
			    </a-tag>
			</div>
			<a-divider />
			<div class="team_title">团队</div>
			<te-am :teamContxt="teamContxt" />
		</a-card>
	</div>
	<div class="center_right">
		<a-card
		  style="width:100%"
		  :tab-list="tabListNoTitle"
		  :active-tab-key="noTitleKey"
		  @tabChange="key => onTabChange(key, 'noTitleKey')"
		>
		  <div v-if="noTitleKey === '1'">
			<a-empty v-if="articleTxT.length === 0 ? true : false" />
			<div class="article_use" v-for="(item,ind) in articleTxT" :key="ind">
				<div class="article_box">
					<div class="article_tit">{{item.title}}</div>
					<div class="a_tag">
						<a-tag v-for="(m,i) in item.tag" :key="i">{{m.name}}</a-tag>
					</div>
					<div class="contxt">
						{{item.contxt}}
					</div>
					<div class="article_author">
						<span><img src="../../img/cradIcon/pay.png" /></span>
						<a>{{item.authorName}}</a>
						发布在
						<a>{{item.authorPath}}</a>
						<span>{{item.date}}</span>
					</div>
					<div class="article_action">
						<div class="article_action_box">
							<a-icon type="star" />
							<span>{{item.star}}</span>
						</div>
						<div class="article_action_box">
							<a-icon type="like" />
							<span>{{item.like}}</span>
						</div>
						<div class="article_action_box">
							<a-icon type="message" theme='filled'/>
							<span>{{item.message}}</span>
						</div>
					</div>
				</div>
				<a-divider />
			</div>
		  </div>
		  <div v-else-if="noTitleKey === '2'">
			<a-empty v-if="Appcard.length === 0 ? true : false" />
			<div class="app_use">
				<div v-for="(item,ind) in Appcard" :key="ind">
					<a-card hoverable>
						<template slot="actions" class="ant-card-actions">
						  <a-icon key="download" type="download" />
						  <a-icon key="edit" type="edit" />
						  <a-icon key="branches" type="branches" />
						  <a-dropdown>
							<a-menu slot="overlay">
							  <a-menu-item key="1"> <a-icon type="user" />1st menu </a-menu-item>
							  <a-menu-item key="2"> <a-icon type="user" />2nd menu </a-menu-item>
							  <a-menu-item key="3"> <a-icon type="user" />3rd menu </a-menu-item>
							</a-menu>
							 <a-icon key="ellipsis" type="ellipsis" />
						  </a-dropdown>
						</template>
						<a-card-meta :title="item.title">
							<a-avatar slot="avatar" :src="item.img" />
							<template slot="description">
								<div class="desBox">
									<div>
										<div>活跃用户</div>
										<div>{{item.active}}万</div>
									</div>
									<div>
										<div>新增用户</div>
										<div>{{item.new}}</div>
									</div>
								</div>
							</template>
						</a-card-meta>
					</a-card>
				</div>
			</div>
		  </div>
		  <div v-if="noTitleKey === '3'">
			<a-empty v-if="Projectcard.length === 0 ? true : false" />
			<div class="project_use">
				<div v-for="(item,ind) in Projectcard" :key="ind">
					<a-card hoverable>
					    <img slot="cover" alt="example" :src="item.img" />
					    <a-card-meta :title="item.title">
					      <template slot="description">
							  <div class="project_use_description">{{item.txt}}</div>
							  <div class="project_use_footer">
								<div>{{item.date}}</div>
								<div class="project_use_img">
									<div :class="'img'+ n" v-for="(im,n) in item.userImg" :key="n">
										<img :src="im.img" />
									</div>
								</div>
							  </div>
						  </template>
					    </a-card-meta>
					  </a-card>
				</div>
			</div>
		  </div>
		</a-card>
	</div>
  </div>
</template>

<script>
import team from '@/components/team.vue'
export default {
  name: 'center',
  data() {
	return {
		tags: ['Tag 1', 'Tag 2', 'Tag 3'],
		inputVisible: false,
		inputValue: '',
		teamContxt:[],
		tabListNoTitle: [
			{
			  key: '1',
			  tab: '文章(8)'
			},
			{
			  key: '2',
			  tab: '应用(8)'
			},
			{
			  key: '3',
			  tab: '项目(8)'
			}
		],
		noTitleKey: '1',
		Appcard: [],
		Projectcard: [],
		articleTxT: []
	}
  },
  components: {
  	"te-am": team
  },
  created(){
	this.teamContxt = this.$store.state.teamContxt
	this.Appcard = this.$store.state.Appcard
	this.articleTxT = this.$store.state.articleTxT
	this.Projectcard = this.$store.state.Projectcard
  },
  methods: {
	onTabChange(key, type) {
		console.log(key, type);
		this[type] = key;
	},
	handleClose(removedTag) {
	  const tags = this.tags.filter(tag => tag !== removedTag);
	  console.log(tags);
	  this.tags = tags;
	},
	showInput() {
	  this.inputVisible = true;
	  this.$nextTick(function() {
		this.$refs.input.focus();
	  });
	},
	handleInputChange(e) {
		this.inputValue = e.target.value;
	},
	handleInputConfirm() {
	  const inputValue = this.inputValue;
	  let tags = this.tags;
	  if (inputValue && tags.indexOf(inputValue) === -1) {
		tags = [...tags, inputValue];
	  }
	  console.log(tags);
	  Object.assign(this, {
		tags,
		inputVisible: false,
		inputValue: '',
	  });
	}
  }
}
</script>
<style lang="less" scoped>
.center{
	margin: 24px;
	display: flex;
	.center_left{
		flex: 1.5;
		padding-right: 12px;
		.center_left_img_box{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.center_left_img_box>div:nth-child(1){
			width: 104px;
			height: 104px;
			margin-bottom: 20px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.center_left_img_box>div:nth-child(2){
			margin-bottom: 4px;
			color: rgba(0,0,0,.85);
			font-size: 20px;
			font-weight: 500;
		}
		.tags{
			margin: 14px 14px 31px 0;
		}
		.team_title{
			margin: 14px 14px 20px 0;
		}
	}
	.center_right{
		flex: 4;
		padding-left: 12px;
		.article_use{
			.article_tit{
				color: rgba(0,0,0,.85);
				font-size: 16px;
				font-weight: 500;
				cursor: pointer;
				margin-bottom: 12px;
			}
			.a_tag{
				margin-bottom: 16px;
			}
			.contxt{
				max-width: 750px;
				color: rgba(0,0,0,.85);
				font-size: 14px;
			}
			.article_action{
				display: flex;
				margin-top: 16px;
			}
			.article_action>div:nth-child(2){
				border-left: 1px solid #f0f0f0;
				border-right: 1px solid #f0f0f0;
				padding: 0 10px;
			}
			.article_action>div:nth-child(3){
				padding: 0 10px;
			}
			.article_action>div>span{
				margin: 0 10px;
			}
			.article_author{
				margin-top: 16px;
				display: flex;
				color: rgba(0,0,0,.45);
				align-items: center;
			}
			.article_author>a{
				margin: 0 10px;
			}
			.article_author>span:nth-child(1){
				width: 20px;
				height: 20px;
				border-radius: 50%;
				display: inline-block;
				line-height: 20px;
				overflow: hidden;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.article_tit:hover{
				color: blue;
			}
		}
		.app_use{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.desBox{
				display: flex;
			}
			.desBox>div{
				margin: 0 5px;
				font-size: 12px;
			}
			.desBox>div>div:nth-child(2){
				color: rgba(0,0,0,.85);
				font-size: 24px;
			}
		}
		.app_use>div{
			padding: 0 8px 18px 8px;
			width: 25%;
		}
		.project_use{
			width: 100%;
			flex-wrap: wrap;
			display: flex;
			.project_use_description{
				height: 44px;
				overflow: hidden;
			}
			.project_use_footer{
				display: flex;
				justify-content: space-between;
				margin-top: 16px;
			}
			.project_use_img{
				position: relative;
				width: 81px;
				height: 24px;
				.img0{
					left: 26px;
					z-index: 3;
				}
				.img1{
					left: 42px;
					z-index: 4;
				}
				.img2{
					left: 57px;
					z-index: 5;
				}
			}
			.project_use_img>div{
				width: 24px;
				height: 24px;
				position: absolute;
				border: 1px solid #d9d9d9;
				border-radius: 50%;
			}
			.project_use_img>div>img{
				width: 100%;
				height: 100%;
			}
		}
		.project_use>div{
			padding: 0 8px 18px 8px;
			width: 25%;
		}
	}
}
</style>
